<template>
    <el-pagination v-bind="useAttrs()" />
</template>

<script setup lang="ts">
import { useAttrs } from "vue";

</script>

<style lang="scss" scoped>
.pagination {
    display: flex;
    justify-content: center;

    :deep(.el-icon) {
        font-size: 30px;
        font-weight: 900;
        transform: scale(2);
    }

    :deep(.el-pager) {
        height: 100px;

        li:nth-last-child(2) {
            /* 在这里添加你想要的样式 */
            // display: none;
        }

        .is-active {
            width: 40px;
            height: 40px;
            opacity: 1;
            color: #fff;
        }

        li {
            background-color: $main-color;
            border-radius: 50%;
            margin: 0 10px;
            color: transparent;
            width: 25px;
            height: 25px;
            opacity: 0.5;
            transition: width 0.5s, height 0.5s, opacity 0.5s, color 0.5s;
            font-weight: 600;
            font-size: 18px;
            transform: scale(1);

            &:hover {
                width: 40px;
                height: 40px;
                opacity: 1;
                color: #fff;
                font-weight: 600;
                font-size: 18px;
            }
        }
    }
}
</style>
